<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>排队状态</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" href="assets/common.css">
    <style>
        .refreshing {
            animation: rotate 1s linear infinite;
        }
        @keyframes rotate {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }
        .notification {
            position: absolute;
            top: 40px;
            left: 0;
            right: 0;
            background-color: rgba(0, 0, 0, 0.7);
            color: white;
            padding: 10px;
            border-radius: 6px;
            text-align: center;
            max-width: 300px;
            margin: 0 auto;
            z-index: 10;
            animation: fadeIn 0.3s, fadeOut 0.3s 2s forwards;
            display: none;
        }
        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }
        @keyframes fadeOut {
            from { opacity: 1; }
            to { opacity: 0; }
        }
        .progress-bar {
            height: 6px;
            background-color: #f0f0f0;
            border-radius: 3px;
            overflow: hidden;
            margin: 10px 0;
        }
        .progress-bar-inner {
            height: 100%;
            background: linear-gradient(90deg, #fd79a8, #e84393);
            width: 25%;
            border-radius: 3px;
            transition: width 0.5s;
        }
        .time-card {
            background-color: white;
            padding: 15px;
            border-radius: 8px;
            display: flex;
            justify-content: center;
            align-items: center;
            box-shadow: 0 2px 5px rgba(0,0,0,0.05);
            font-size: 20px;
            font-weight: bold;
            margin: 0 5px;
        }
        .queue-people {
            display: flex;
            margin-top: 20px;
            justify-content: center;
        }
        .queue-person {
            width: 44px;
            height: 44px;
            background-color: #f0f0f0;
            border-radius: 50%;
            margin: 0 5px;
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #888;
        }
        .queue-person.active {
            background-color: #fd79a8;
            color: white;
        }
        .queue-number {
            position: absolute;
            bottom: -20px;
            left: 0;
            right: 0;
            text-align: center;
            font-size: 12px;
            color: #666;
        }
    </style>
</head>
<body>
    <div class="wechat-container">
        <div class="wechat-header">
            <div class="wechat-back">
                <i class="fas fa-chevron-left"></i>
            </div>
            排队状态
            <div style="position: absolute; right: 16px; bottom: 12px; font-size: 18px;">
                <i class="fas fa-sync-alt refreshing"></i>
            </div>
        </div>
        
        <div class="wechat-content">
            <div class="notification">
                刷新成功，当前排队人数已更新
            </div>
            
            <!-- Photographer Info -->
            <div class="wechat-card flex items-center gap-3">
                <div class="wechat-avatar-sm">
                    <i class="fas fa-user"></i>
                </div>
                <div>
                    <div class="font-bold">林夕摄影</div>
                    <div class="text-xs text-gray">基础写真套餐</div>
                </div>
            </div>
            
            <!-- Queue Status -->
            <div class="wechat-card mt-4">
                <div class="text-center">
                    <h3 class="font-bold">您的排队号码</h3>
                    <div class="queue-number">4</div>
                    <div class="font-bold text-pink text-sm mt-1">
                        预计等待时间
                    </div>
                    
                    <!-- Countdown -->
                    <div class="flex justify-center mt-2 gap-2">
                        <div class="time-card">0</div>
                        <div class="time-card">4</div>
                        <div class="text-lg flex items-center">:</div>
                        <div class="time-card">5</div>
                        <div class="time-card">2</div>
                    </div>
                    <div class="text-xs text-gray mt-1">
                        预计 11:22 开始拍摄
                    </div>
                    
                    <div class="mt-4">
                        <div class="flex justify-between text-sm">
                            <div>排队进度</div>
                            <div>前面还有 <span class="text-pink font-bold">3</span> 人</div>
                        </div>
                        <div class="progress-bar">
                            <div class="progress-bar-inner"></div>
                        </div>
                    </div>
                    
                    <div class="queue-people">
                        <div class="queue-person">
                            <i class="fas fa-user"></i>
                            <div class="queue-number">1</div>
                        </div>
                        <div class="queue-person">
                            <i class="fas fa-user"></i>
                            <div class="queue-number">2</div>
                        </div>
                        <div class="queue-person">
                            <i class="fas fa-user"></i>
                            <div class="queue-number">3</div>
                        </div>
                        <div class="queue-person active">
                            <i class="fas fa-user"></i>
                            <div class="queue-number">4 (您)</div>
                        </div>
                        <div class="queue-person">
                            <i class="fas fa-user"></i>
                            <div class="queue-number">5</div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- Current Status -->
            <div class="wechat-card mt-4">
                <h3 class="font-bold mb-2">当前状态</h3>
                <div class="flex items-center gap-3">
                    <div class="bg-yellow-100 text-yellow-600 rounded-full w-10 h-10 flex items-center justify-center">
                        <i class="fas fa-clock"></i>
                    </div>
                    <div>
                        <div class="font-bold">等待拍摄中</div>
                        <div class="text-sm text-gray">请您稍等，摄影师正在为前面的顾客服务</div>
                    </div>
                </div>
            </div>
            
            <!-- Notification Settings -->
            <div class="wechat-card mt-4">
                <h3 class="font-bold mb-3">通知提醒</h3>
                <div class="flex items-center justify-between">
                    <div>
                        <div>到我拍摄时微信通知我</div>
                        <div class="text-sm text-gray mt-1">还剩1人时，系统会通知您准备</div>
                    </div>
                    <div>
                        <label class="switch">
                            <input type="checkbox" checked>
                            <span class="slider round"></span>
                        </label>
                    </div>
                </div>
            </div>
            
            <!-- Appointment Details -->
            <div class="wechat-card mt-4">
                <h3 class="font-bold mb-2">预约详情</h3>
                <div class="text-sm">
                    <div class="flex justify-between mb-1">
                        <div class="text-gray">预约时间</div>
                        <div>2024年6月15日 11:30</div>
                    </div>
                    <div class="flex justify-between mb-1">
                        <div class="text-gray">拍摄地点</div>
                        <div>星漫动漫展C区3号展位旁</div>
                    </div>
                    <div class="flex justify-between">
                        <div class="text-gray">拍摄时长</div>
                        <div>约30分钟</div>
                    </div>
                </div>
            </div>
            
            <!-- Action Buttons -->
            <div class="flex gap-3 mt-6">
                <button class="wechat-btn wechat-btn-outline flex-1">
                    取消预约
                </button>
                <button class="wechat-btn flex-1">
                    联系摄影师
                </button>
            </div>
            
            <div class="text-center text-sm text-gray mt-4">
                <p>数据自动刷新中，每30秒更新一次</p>
                <p class="mt-1">最后更新时间: 10:37:24</p>
            </div>
        </div>
    </div>
</body>
</html> 